<template>
    <div>    
            <el-form :model="param" inline style="text-align: left; position: relative;">
                <el-form-item label="项目名称">
                    <el-input v-model="param.pname" placeholder="请输入名称" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select v-model="param.deptno" placeholder="请选择部门" clearable>
                        <el-option
                        v-for="item in deptOptions"
                        :key="item.deptno"
                        :label="item.dname"
                        :value="item.deptno"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button type="primary" @click="addProject">新增</el-button>
                    <el-button type="primary" @click="editSelectedProject">编辑</el-button>
                    <el-button @click="deleteSelectedProject">删除</el-button>
                </el-form-item>
            </el-form>

            <el-table
                :data="tableData"
                border
                style="width: 100%"
                height="444px"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="pid" label="项目编号" width="80" align="center"></el-table-column>
                <el-table-column prop="pname" label="项目名称" min-width="120" align="center"></el-table-column>
                <el-table-column prop="dname" label="所属部门" width="180" align="center"></el-table-column>
                <el-table-column prop="ouputvalue" label="预估产值" width="150" header-align="center" align="right"></el-table-column>
                <el-table-column prop="estimatevalue" label="预估外购金额" width="150" header-align="center" align="right"></el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleEditProject(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="text" size="small" @click="handleDeleteProject(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                style="margin-top: 20px; text-align: right;"
                :current-page="parseInt(param.page)"
                :page-size="parseInt(param.limit)"
                :page-sizes="[7,10,15,20]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>

        <project-info
        :visible.sync="projectVisible"
        dialog-title="项目详情"
        :project-data="currentProject"
        :dept-data="deptOptions"
        @close="handleProjectClose">
        </project-info>
    </div>
</template>

<script>
import ProjectInfo from '@/components/ProjectInfo.vue';

export default {
    name: 'projectList',
    components: {
        ProjectInfo
    },
    data() {
        return {
            param: {
                page: '1',
                limit: '7',
                pname: '',
                deptno: null
            },
            deptOptions: [],
            tableData: [],
            projectVisible: false,
            currentProject: {},
            checkedData: [],
            total: 0
        }
    },
    created(){
        this.getDeptOptions()
        this.getTableData()
    },
    methods: {
        getDeptOptions() {
            const params = {
                page: '1',
                limit: '1000',
                dname: '',
                deptno: null
            }
            this.$http.post('/getDept',params).then(res => {
                this.deptOptions = res.data.data
            }).catch(() => {
                this.$message.error('获取部门列表失败')
            })
        },

        getTableData() {
            this.$http.post('/getProject',this.param).then(res => {
                this.tableData = res.data.data
                this.total = res.data.count
            }).catch(() => {
                this.$message.error('获取项目失败')
            })
        },

        handleSearch() {
            this.param.page = 1
            this.getTableData()
        },

        handleReset() {
            this.param = {
                page: '1',
                limit: '7',
                pname: '',
                deptno: null
            }
            this.getTableData()
        },

        handleSizeChange(val) {
            this.queryParams.limit = val
            this.getTableData()
        },

        handleCurrentChange(val) {
            this.param.page = val
            this.getTableData()
        },

        handleSelectionChange(val) {
            this.checkedData = val
        },

        addProject() {
            this.currentProject = {}
            this.projectVisible = true
        },

        handleEditProject(row){
            this.currentProject = row
            this.projectVisible = true
        },

        editSelectedProject() {
            if (this.checkedData.length === 0) {
                this.$message.warning('请选择需要编辑的项目')
                return
            }
            if (this.checkedData.length > 1) {
                this.$message.warning('只能选择一项进行编辑')
                return
            }
            this.currentProject = this.checkedData[0]
            this.projectVisible = true
        },

        handleDeleteProject(row) {
            this.$confirm('确定要删除所选项目吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let pids = []
                pids.push(row.pid)
                this.$http.post('/deleteProject',pids).then(res=>{
                    debugger
                    if(res.data === 'success') {
                        this.$message.success('删除成功')
                        this.getTableData()
                    } else {
                        this.$message.error('删除失败')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })       
            })
        },

        deleteSelectedProject() {
            if (this.checkedData.length === 0) {
                this.$message.warning('请选择需要删除的项目')
                return
            }
            this.$confirm('确定要删除所选项目吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let pids = []
                for(let project of this.checkedData){
                    pids.push(project.pid)
                }
                this.$http.post('/deleteProject',pids).then(res=>{
                    if(res.data ==='success') {
                        this.$message.success('删除成功')
                        this.getTableData()
                    } else {
                        this.$message.error('删除失败')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })   
        },

        handleProjectClose() {
            this.projectVisible = false
            this.currentProject = {}
            this.getTableData()
        }
    }
}
</script>

<style>

</style>